<template>
	<!-- <a-modal :width="500" :visible="visible" :title="params.name" @ok="handleOk" @cancel="handleClose" centered> -->
		<div>
			
			<!-- 场景音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'sence'">
			<div class="form_item" >
				<div class="form_title">场景音频</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.scene_volume" />
					</div>
					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.scene_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'scene_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'scene_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>
			</div>
			<div class="form_item" >
				<div class="form_title">视频原声</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.video_volume" />
					</div>

					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.video_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'video_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'video_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>

					<!-- <a-input-number size="small" :min="0" :max="100" style="min-width: 100px; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value="operateForm.video_volume" /> -->
			</div>

			<!-- <div class="form_item">
				<div class="form_title">场景音频</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.scene_volume" />
				</a-col>
				<a-input-number  :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.scene_volume" />
			</div> -->
			<!-- <div class="form_item"  style="min-width: 300px;">
				<div class="form_title">视频原声</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="operateForm.video_volume" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="operateForm.video_volume" />
			</div> -->
		</div>
		<!-- 素材音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'material'">
			<div class="form_item" >
				<div class="form_title">视频原声</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.video_volume" />
					</div>

					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.video_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'video_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'video_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>
			</div>
		</div>

		<!-- 口播音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'broad'">
			<div class="form_item">
                <div class="form_title">全程解说</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.audio_volume" />
					</div>
					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.audio_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'audio_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'audio_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>
<!-- 
					<a-input-number size="small" :min="0" :max="100" style="min-width: 100px; border-radius: 6px; margin-left: 20px;"
						v-model:value="operateForm.audio_volume" /> -->
			</div>
		</div>

		<!-- 音乐音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'music'">
            <div class="form_item">
                <div class="form_title">背景音乐</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.bgm_volume" />
					</div>
					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.bgm_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'bgm_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'bgm_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>
					<!-- <a-input-number size="small" :min="0" :max="100" style="min-width: 100px; border-radius: 6px; margin-left: 20px;"
						v-model:value="operateForm.bgm_volume" /> -->
			</div>
		</div>

		<!-- 素材颜色调整 -->
		<div class="form_con" v-if="params.name == '颜色调整' && (params.parent_type == 'material' || params.parent_type == 'sence')">
			<div class="form_item">
				<div class="form_title">对比度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.contrast" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.contrast" />
			</div>

			<div class="form_item">
				<div class="form_title">饱和度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.saturation" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.saturation" />
			</div>
			<div class="form_item">
				<div class="form_title">亮度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.brightness" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.brightness" />
			</div>

			<div class="form_item">
				<div class="form_title">色调</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="-100" :max="100" v-model:value="color.tint" />
				</a-col>
				<a-input-number :min="-100" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.tint" />
			</div>
			<div class="form_item">
				<div class="form_title">色温强度</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="0" :max="100" v-model:value="color.temperature_ratio" />
				</a-col>
				<a-input-number :min="0" :max="100" style="width: 120px; margin-left: 20px"
					v-model:value="color.temperature_ratio" />
			</div>

			<div class="form_item">
				<div class="form_title">色温</div>
				<a-col :span="12" style="margin-left: 20px">
					<a-slider :min="1000" :max="40000" v-model:value="color.kelvin_temperature" />
				</a-col>
				<a-input-number :min="1000" :max="40000" style="width: 120px; margin-left: 20px"
					v-model:value="color.kelvin_temperature" />
			</div>
		</div>
		<!-- 音乐随机音乐 -->
		<div class="form_con" v-if="params.name == '随机音乐' && params.parent_type == 'music'">
			<div class="form_item">
				<div class="form_title">是否随机</div>
				<a-switch style="margin-left: 10px" checkedValue="random" unCheckedValue="custom"
					v-model:checked="operateForm.random" />
			</div>
		</div>

		<!-- 模板随机模板 -->
		<div class="form_con" v-if="params.name == '随机模板' && params.parent_type == 'template'">
			<div class="form_item">
				<div class="form_title">是否随机</div>
				<a-switch style="margin-left: 10px" checkedValue="random" unCheckedValue="custom"
					v-model:checked="operateForm.random" />
			</div>
		</div>
		
		<!-- 模板 音量调整 -->
		<div class="form_con" v-if="params.name == '音量调整' && params.parent_type == 'template'">
			<div class="form_item" >
				<div class="form_title">背景音乐</div>
					<div style="min-width: 230px;">
						<a-slider :min="0" :max="100" v-model:value="operateForm.bgm_volume" />
					</div>
					<a-input-number  :bordered="false" :controls="false" size="small" :min="0" :max="100" style="width: 100px; color: #dcdcdc; border-color: #3c3c3e; border-radius: 6px; margin-left: 20px; background-color: #3c3c3e;"
						v-model:value.number="operateForm.bgm_volume" >
						<template #addonAfter>
							<div style="color: #969697;">
								<minus-outlined style="margin-right: 10px;" class="minus-outlined" @click="changeScene_volume({
									modelVal:'bgm_volume',
									changeType:'reduce'
								})"/>
								<plus-outlined class="plus-outlined" @click="changeScene_volume({
									modelVal:'bgm_volume',
									changeType:'add'
								})"/>
							</div>
						</template>
					</a-input-number>
					<!-- <a-input-number size="small" :min="0" :max="100" style="min-width: 100px; border-radius: 6px; margin-left: 20px;"
						v-model:value="operateForm.bgm_volume" /> -->
			</div>
		</div>
		
		<!-- 模板筛选 -->
		<div class="form_con" v-if="params.name == '筛选' && params.parent_type == 'template'">
			<div class="duration_con">
				时长：
				<a-tag @click="tagChange(index)" style="cursor: pointer; padding: 4px 18px;" :color="index == durationKey?'#2878FF':'default'" v-for="(item, index) in durationList" :key="index">{{item}}</a-tag>
			</div>
			<!-- <div class="label_con" style="margin-top: 10px;" v-if="labelList?.length"> -->
			<div class="label_con" style="margin-top: 10px;">
				标签：
				<a-tag @click="labelKey = index" style="cursor: pointer;padding: 4px 18px;" :color="index == labelKey?'#2878FF':'default'" v-for="(item, index) in labelList" :key="index">{{item}}</a-tag>
			</div>
		</div>
	</div>

	<!-- </a-modal> -->
</template>

<script>

	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
    onMounted,
	} from "vue";
	import {
		MinusOutlined,
		PlusOutlined,
	} from "@ant-design/icons-vue";
	import store from "../../../../../../store";
	import request from "../../../../../../common/utils/request";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			params: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},

		components: {
			PlusOutlined,
			MinusOutlined
		},

		setup(props, context) {
			const state = reactive({
				durationKey: 0,
				labelKey: 0,
				operateForm: {
					scene_volume: 100,
					video_volume: 50,
					bgm_volume: 50,
					audio_volume: 100,
					random: "custom",
				},
				// 颜色
				color: {
					contrast: 0,
					saturation: 0,
					brightness: 0,
					tint: 0,
					temperature_ratio: 0,
					kelvin_temperature: 6000,
				},
				
				//模板筛选
				durationList: [
					'全部',
					'10秒以内',
					'10~15秒',
					'15秒以上'],
				labelList: []
			});


			onMounted(()=>{
				getTagList()
			})

			// 获取标签信息
			const getTagList = () => {
				request.get('/work_ai', '/user/shotstack/clip/videoTemplate/taglist').then(res=> {
					console.log(res,'taglist');
					state.labelList = res.lists
					state.labelList.unshift('全部')
				})
			}

		/**
		 * data:{
		 * 	modelVal: 绑定的数据类型
		 * 	changeType: 修改的类型(增加或减少)
		 * }
		 */
		const changeScene_volume =(data)=>{
			console.log(state.operateForm[data.modelVal],'val');
			if(data.changeType == 'add'){
				state.operateForm[data.modelVal] < 100 && (state.operateForm[data.modelVal] += 1);
			}else{
				state.operateForm[data.modelVal] > 1 && (state.operateForm[data.modelVal] -=1);
			}
			
		}

		// 筛选 切换标签
		const tagChange = (index) =>{
			state.durationKey = index
			handleOk();
		}
			const handleOk = () => {
				const {
					params: {
						name,
						type,
						parent_type
					},
				} = props;
				// 场景
				if (name === "音量调整" && parent_type == 'sence') {
					store.dispatch("SetClipJSONVolume", {
						scene_volume: state.operateForm['scene_volume'],
						video_volume: state.operateForm['video_volume'],
					});
				}
				// 音乐
				if (name === "音量调整" && parent_type == 'music') {
					store.dispatch("SetClipJSONVolume", {
						bgm_volume: state.operateForm['bgm_volume']
					});
				}
				// 模板
				if (name === "音量调整" && parent_type == 'template') {
					store.dispatch("SetClipJSONVolume", {
						bgm_volume: state.operateForm['bgm_volume']
					});
				}
				// 模板 随机
				if (name === "随机模板" && parent_type == 'template') {
					store.dispatch("SetClipInfo", {
						use_random_template: state.operateForm['random'] == 'random'?true:false
					});
				}
				// 素材
				if (name === "音量调整" && parent_type == 'material') {
					store.dispatch("SetClipJSONVolume", {
						video_volume: state.operateForm['video_volume']
					});
				}
				// 口播
				if (name === "音量调整" && parent_type == 'broad') {
					store.dispatch("SetClipJSONVolume", {
						audio_volume: state.operateForm.audio_volume,
					});
				}
				// 素材
				if (name === "颜色调整" && (parent_type == 'material' || parent_type == 'sence')) {
					store.dispatch("SetClipJSONColor", {
						...state.color,
					});
				}
				// 音乐
				if (name === "随机音乐" && parent_type == 'music') {
					const obj = {
						bgm_mode: state.operateForm.random,
					};
					if (state.operateForm.random === "random") {
						Object.assign(obj, {
							bgm: [],
						});
					} else {
						Object.assign(obj, {
							bgm_scenes: [],
						});
					}
					store.dispatch("SetClipInfo", {
						...obj,
					});
				}
				// 模板 筛选
				if (name === "筛选" && parent_type == 'template') {
					let obj = {
						durationKey: state.durationKey,
						labelKey: state.labelKey,
						duration: state.durationList[state.durationKey],
						label: state.labelList[state.labelKey]
					}
					store.dispatch('SetSelectTemplate', {
						...obj
					})
				}
				// context.emit("close");
			};

			const handleClose = () => {
				context.emit("close");
			};
			watch(
				() => state.operateForm,
				(val) => {
					const {
						params: {
							name,
							type,
							parent_type,
						},
					} = props
					if (val) {
						console.log(name,parent_type,'props' );
						if(name == '筛选' && parent_type == 'template'){
							// getTagList()
						}
						if (name === "音量调整" && parent_type == 'material') {
							handleOk()
							state.operateForm['scene_volume'] = store.getters.clipJSON.volume['scene_volume']
							console.log(store.getters.clipJSON.volume['scene_volume'] ,'props');
						}
						if (name === "音量调整" && parent_type == 'sence') {
							handleOk()
							state.operateForm['scene_volume'] = store.getters.clipJSON.volume['scene_volume']
							state.operateForm['video_volume'] = store.getters.clipJSON.volume['video_volume']
						}
						if (name === "音量调整" && parent_type == 'template') {
							handleOk()
							state.operateForm['bgm_volume'] = store.getters.clipJSON.volume['bgm_volume']
						}
						// 口播音量调整
						if(name === '音量调整' && parent_type === 'broad'){
							handleOk()
							state.operateForm['audio_volume'] = store.getters.clipJSON.volume['audio_volume']
						}
						// 音乐音量调整
						if(name === '音量调整' && parent_type === 'music'){
							handleOk()
							state.operateForm['bgm_volume'] = store.getters.clipJSON.volume['bgm_volume']						}
						if (name === "随机模板" && parent_type == 'template') {
							handleOk()
							state.operateForm['random'] = store.getters.clipJSON.use_random_template?'random':'custom'
						}
						if (name === "颜色调整") {
							state.color = store.getters.clipJSON.effect_filter.color;
						}

						if (props?.params?.name === "随机音乐") {
							handleOk()
							state.operateForm.random = store.getters.clipJSON.bgm_mode;
						}
						console.log(parent_type,name,'音量调整');
					}
				},
				{
					deep: true,
					immediate: true,
				}
			);
			


			return {
				...toRefs(state),
				handleOk,
				handleClose,
				changeScene_volume,
				tagChange,
				getTagList,
			};
		},
	});
</script>

<style lang="less" scoped>
:deep(.ss-input){
	background-color: #3c3c3e;
	color: #ffffffee;
}
:deep(.ss-input-number-group-addon){
	border: none;
	background-color: #3c3c3e00;
}
:deep(.ss-input-number-sm){
	color: #dfdfdf;
	background-color: #ffffff00;
}

:deep(.ss-input-number-group){
	color: #8d8d91;
	border: 1px solid #ffffff00;
	border-radius: 5px;
	&:hover{
		border-color:#eea4a4 ;
	}
}


.minus-outlined{
	color: #d4cbcc;
	cursor: pointer;
	
	&:hover{
		color: #eea4a4;
	}
}

.plus-outlined{
	color: #d4cbcc;
	cursor: pointer;
	&:hover{
		color: #eea4a4;
	}
}

	.form_con {
		color: #8d8d91;
		
		.form_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10px;
			margin-top: 10px;
			.form_title {
				// width: 170px;
				white-space: nowrap;
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
		}
	}
</style>